
<script>
	// 数据详情页
	import {
		defineComponent
	} from 'vue'
	export default defineComponent({
		components: { Detail },
		name: 'WeworkQrList'
	})
</script>
<script setup>
import Detail from './table/detail.vue'
import * as echarts from 'echarts'
import {dateTypes} from '@/utils'
import { qrDataTableListData } from '@/data'
import MyIcon from '@/components/my-icon/index.vue'
	import { ref,onMounted } from 'vue'
	import {reqQrTable} from '@/api'
	import { toRaw } from '@vue/reactivity'
	import ChooseDialogue from '@/components/app/chooseDialogue.vue'
const isRefresh = ref(true)
const handleRefresh = () => {
  isRefresh.value = false
  isRefresh.value = true
}
const selfTime = ref([])
const dialogVisible = ref(false)
const staffData = ref([])
const chooseStaff = () => {
  dialogVisible.value = true
  chooseDialogue.value.show('staff', staffData.value)
}
const getChooseData = (val) => {
  console.log(val, '数据回显')
  staffData.value = val
	reqQrTableData()
  handleRefresh()
}
const chooseDialogue = ref(null)
const dateTypeList = ref([])
dateTypeList.value = dateTypes
const queryForm = ref({
	 "id":[],
    "type":"date",
    "date_type":"day",
    "startime":"",
    "endtime":"",
    "staff_id":[]
})
const show = (ids)=>{
	queryForm.value.id = toRaw(ids)
	reqQrTableData()
}
	const reqQrTableData = async()=>{
		if (selfTime.value){
		if (selfTime.value.length==2){
			queryForm.value.startime = selfTime.value[0]
			queryForm.value.endtime = selfTime.value[1]
		}else{
			queryForm.value.startime =''
			queryForm.value.endtime = ''
		}
	}else{
		queryForm.value.startime =''
		queryForm.value.endtime = ''
	}
	if (staffData.value.length>0) {
		queryForm.value.staff_id = []
		staffData.value.forEach(item=>{
			queryForm.value.staff_id.push(item.id)
		})
	}
	const r = await reqQrTable(queryForm.value)
	
		if(r){
			tableData.value = r.data
			
		}
	}

	const tableData = ref([])

	const exportExcel = () => {
		console.log('导出excel')
	}
	const detail = ref()
	const showDetailDialogue = (val) => {
		console.log('查看详情')
		detail.value.show(val)
	}
	defineExpose({
	show
})
  
</script>

<template>
	<div class="app-edit app-gap-block">
    <div class="app-container">
			<div class="table-title app-flex-left">表格数据</div>
      <div class="app-gap-block-top">
				<div class="app-flex-2">
					<div>
						<el-radio-group v-model="queryForm.type" @change="reqQrTableData" size="large">
      <el-radio-button label="date" >按日期查看</el-radio-button>
      <el-radio-button label="staff" >按员工查看</el-radio-button>
		</el-radio-group>
		</div>
		<div>
				<!-- <el-button class="app-btn" @click="exportExcel">导出Excel</el-button> -->
		</div>

				</div>
				<div class="app-gap-block-top app-flex-left">
					<el-select v-model="queryForm.date_type" @change="reqQrTableData" class="m-2" placeholder="请选择" size="large">
						<el-option v-for="(item, index) in dateTypeList" :key="index" :label="item.title" :value="item.name" />
					</el-select>
					<span v-if="queryForm.date_type=='self'" class="app-gap-words-left app-select-right">自定义：</span>
					<el-date-picker
					style="max-width:300px"
					v-if="queryForm.date_type=='self'"
					@change="reqQrTableData"
						v-model="selfTime"
						type="daterange"
						value-format="YYYY-MM-DD"
						format="YYYY-MM-DD"
						range-separator="~"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						size="large"
					/>
					<span class="app-gap-words-left app-select-right">选择员工：</span>
					<span v-if="isRefresh">
  <span @click="chooseStaff" class="app-flex-2 app-choose-staff" v-if="staffData.length>2">
    <span class="app-flex-left">
      <el-avatar v-if="staffData[0].avatar" class="cho-margin" shape="square" :size="30" :src="staffData[0].avatar" />
      <span>{{ staffData[0].name }}等{{staffData.length}}个账号</span>
    </span>
    <el-icon>
      <ArrowDown />
    </el-icon>
  </span>
  <span @click="chooseStaff" class="app-flex-2 app-choose-staff" v-else>
    <span class="app-flex-left" v-for="(item,index) in staffData" :key="index">
      <el-avatar v-if="item.avatar" class="cho-margin" shape="square" :size="30" :src="item.avatar" />
      <span>{{ item.name }}</span>
    </span>
    <span v-if="staffData.length==0">请选择</span>
    <el-icon>
      <ArrowDown />
    </el-icon>
  </span>
</span>
<ChooseDialogue :dialogVisible="dialogVisible" @getChooseData="getChooseData($event, val)" ref="chooseDialogue" />
				</div>
			 

<div class="app-gap-block-top">
					<el-table class="app-select-table app-container-radius" :data="tableData" style="width:100%">
						<el-table-column prop="date" label="日期" align="left" />
						<el-table-column align="left">
						<template #header>
							<div class="app-flex-left">
								<span class="">客户总数</span>
								<el-popover width="" popper-style="padding: 0px;min-width:0px" placement="top" trigger="hover">
									<div class="app-container pop-max-width">
										截止当前日期扫码添加的客户总数，若客户重复添加将不会重复计数；如果员工删除了客户，客户列表中将不会展示该客户
									</div>
									<template #reference>
										<MyIcon class="question-icon" name="Question" />
									</template>
								</el-popover>
							</div>
						</template>
						<template #default="scope">
							{{ scope.row.total_number }}
						</template>
					</el-table-column>
						<el-table-column align="left">
						<template #header>
							<div class="app-flex-left">
								<span class="">新增人数</span>
								<el-popover width="" popper-style="padding: 0px;min-width:0px" placement="top" trigger="hover">
									<div class="app-container pop-max-width">
										当前日期当天扫码添加的新增客户数，包含流失数据；如果员工删除了客户，客户列表中将不会展示该客户
									</div>
									<template #reference>
										<MyIcon class="question-icon" name="Question" />
									</template>
								</el-popover>
							</div>
						</template>
						<template #default="scope">
							{{ scope.row.new_number}}
						</template>
					</el-table-column>
						<el-table-column align="left">
						<template #header>
							<div class="app-flex-left">
								<span class="">流失人数</span>
								<el-popover width="" popper-style="padding: 0px;min-width:0px" placement="top" trigger="hover">
									<div class="app-container pop-max-width">
										扫码添加后将成员删除的客户数
									</div>
									<template #reference>
										<MyIcon class="question-icon" name="Question" />
									</template>
								</el-popover>
							</div>
						</template>
						<template #default="scope">
							{{ scope.row.lossing_number }}
						</template>
					</el-table-column>
						<!-- <el-table-column label="操作" align="right">
						
						<template #default="scope">
							<span class="primary-font app-pointer" @click="showDetailDialogue(scope.row)">查看详情</span>
						</template>
					</el-table-column> -->
					</el-table>
			</div>
			</div>
		
			
    </div>
		<Detail ref="detail" />
    
	<div>
</div>

</div>


</template>
<style lang="scss">
	@import url('../../../../style/app-component.scss');
	@import '../../../../style/mixin.scss';
</style>